<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/31
  Time: 14:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="/library/js/jquery.js"></script>
<body>
<form>
    书本编号：<input type="text" name="bookNum" id="bookNum">
    书名：<input type="text" name="bookName" id="bookName">
    作者：<input type="text" name="bookWriter" id="bookWriter">
    类型：<select  name="bookType" id="bookType">
            <option value="科幻">科幻</option>
            <option value="玄幻" >玄幻</option>
            <option value="" selected></option>
         </select>
    <input type="button" value="查找" id="searchBtn">
</form>
<a href="/library/bookAdd">添加书本</a>
</div>

<div>
    <table border="1" width="800px">
        <thead>
        <th>id</th>
        <th>书本编号</th>
        <th>书名</th>
        <th>作者</th>
        <th>类型</th>
        <th>价格</th>
        <th>库存</th>
        <th>操作</th>
        </thead>
        <tbody>

        </tbody>
    </table>
    <select id="pageSize">
        <option value="5">5</option>
        <option value="10" selected>10</option>
        <option value="15">15</option>
        <option value="20">20</option>
    </select>
</div>

<div id="pageBar">

</div>
</body>
<script>
    let currentPage = 1;

    $("#searchBtn").click(function(){
        searchBook(1);
    })

    $("#pageSize").change(function(){
        searchBook(1);
    })

    searchBook(1);
    function searchBook(pageNum){
        $("tbody").empty();
        let bookNum = $("#bookNum").val();
        let bookName = $("#bookName").val();
        let bookWriter = $("#bookWriter").val();
        let bookType = $("#bookType").val();
        let pageSize = $("#pageSize").val();
        $.ajax({
            url:"/library/book/getBooks",
            type:"get",
            data:{
                "bookNum":bookNum,
                "bookName":bookName,
                "bookWriter":bookWriter,
                "bookType":bookType,
                "pageNum":pageNum,
                "pageSize":pageSize
            },
            dataType:"json",
            success:function(data){
                console.log(data);
                let books = data.list;
                for(let i = 0;i<books.length;i++){
                    let book = books[i];
                    let tr = $("<tr></tr>");
                    tr.append("<td>"+book.bookId+"</td>");
                    tr.append("<td>"+book.bookNum+"</td>");
                    tr.append("<td>"+book.bookName+"</td>");
                    tr.append("<td>"+book.bookWriter+"</td>");
                    tr.append("<td>"+book.bookType+"</td>");
                    tr.append("<td>"+book.bookPrice+"</td>");
                    tr.append("<td>"+book.inventory+"</td>");
                    tr.append(`<td><a href="#" onclick="deleteBook(${"${book.bookId}"})">删除</a>
                                    <a href="/library/book/update?bookId=${"${book.bookId}"}">修改</a>
                                    </td>`)
                    $("tbody").append(tr);
                }
                makePageBar(data);
            }
        })
    }
    //jsp中要使用 模板字符串
    function makePageBar(data){
        let pageBar = $("#pageBar");
        pageBar.empty();
        if(data.hasPreviousPage){
            let lastPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum-1}"})">上一页</a>`);
            pageBar.append(lastPage);
        }

        for(let i = 0;i<data.navigatepageNums.length;i++){
            let a = $(`<a href="#" onclick="searchBook(${"${data.navigatepageNums[i]}"})">${"${data.navigatepageNums[i]}"}</a>`);
            if(data.pageNum == data.navigatepageNums[i]){
                a.addClass("red");
                currentPage = data.pageNum;
            }
            pageBar.append(a);
        }
        if(data.hasNextPage){
            let nextPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum+1}"})">下一页</a>`);
            pageBar.append(nextPage);
        }
    }

    function deleteBook(bookId){
        let confirm = window.confirm("请确认是否要删除，无法撤销");
        if(!confirm){
            return false;
        }
        $.ajax({
            url:"/library/book/deleteBook",
            type:"POST",
            data:{
                "bookId":bookId
            },
            success:function(data){
                if(data == 'success'){
                    alert("删除成功");
                    searchBook(currentPage);
                }else{
                    alert("删除失败");
                }
            }
        })
    }
</script>
</html>
